<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Twei管理员登录</title>
    <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
    <meta name="author" content="Vincent Garreau"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="shortcut icon"
          href="https://cdn.jsdelivr.net/gh/Fuukei/Public_Repository@latest/vision/basic/favicon.ico">
    <link rel="stylesheet" type="text/css" href="./css/mouse.css">
    <link rel="stylesheet" media="screen" href="./css/styles.css">
    <link rel="stylesheet" type="text/css" href="./css/reset.css"/>
    <script src="./js/jquery-3.5.1.js"></script>
    <script src="http://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>

</head>
<body>
<script>
    $(document).ready(function () {
        setInterval(function gets() {
            $.ajax({
                url: "https://tenapi.cn/acg/?return=json",
                dataType: 'json',
                type: "GET",
                async: true,
                success: function (data) {
                    if (data.code === 200) {
                        $("body").css("background", "url(" + data.imgurl + ")")
                    }
                }
            });
        }, 3500);
    });

</script>
<div id="particles-js">
    <div class="login">
        <div class="login-top">
            管理员登录
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="./images/name.png"/></div>
            <div class="login-center-input">
                <input id="username" type="text" name="" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''"
                       onblur="this.placeholder='请输入您的用户名'"/>
                <div class="login-center-input-text">用户名</div>
            </div>
        </div>
        <div class="login-center clearfix">
            <div class="login-center-img"><img src="./images/password.png"/></div>
            <div class="login-center-input">
                <input id="password" type="password" name="" value="" placeholder="请输入您的密码"
                       onfocus="this.placeholder=''"
                       onblur="this.placeholder='请输入您的密码'"/>
                <div class="login-center-input-text">密码</div>
            </div>
        </div>
        <div class="login-button">
            登陆
        </div>
        <script>
            $(document).keydown(function (event) {
                if (event.keyCode === 13) {
                    $('.login-button').triggerHandler('click');
                }
            });
        </script>
    </div>
    <div class="sk-rotating-plane"></div>
</div>

<!-- scripts -->
<script src="./js/particles.min.js"></script>
<script src="./js/app.js"></script>
<script src="./lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script type="text/javascript">
    function hasClass(elem, cls) {
        cls = cls || '';
        if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
        return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
    }

    function addClass(ele, cls) {
        if (!hasClass(ele, cls)) {
            ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
        }
    }

    function removeClass(ele, cls) {
        if (hasClass(ele, cls)) {
            var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
            while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                newClass = newClass.replace(' ' + cls + ' ', ' ');
            }
            ele.className = newClass.replace(/^\s+|\s+$/g, '');
        }
    }

    layui.use(['jquery', 'layer'], function () {
        var $ = layui.jquery,
            layer = layui.layer;

        function judgeuser(username) {
            let resultdata = null;
            $.each(JSON.parse(JSON.stringify(layui.data("twei").user)), function (index, item) {
                if (username === item.username) {
                    resultdata = {psw: item.password, auth: item.authority};
                }
            });
            return resultdata;
        }

        // JSON.parse(JSON.stringify(layui.data("twei").user)).splice(2, 1);

        // let jsonDatas = JSON.parse(JSON.stringify(layui.data("twei").user));
        // jsonDatas.push({username: 'admin', password: "123456", authority: 1});


        document.querySelector(".login-button").onclick = function () {
            let username = $("#username").val();
            let password = $("#password").val();
            if (username === "" || username == null) {
                layer.msg("请输入用户名", {icon: 2, time: 800});
            } else if (password === "" || password == null) {
                layer.msg("请输入密码", {icon: 2, time: 800});
            } else {
                let userdata = judgeuser(username);
                console.log(userdata)
                if (userdata != null) {
                    if (userdata.psw === md5(password)) {
                        if (userdata.auth === 1) {
                            addClass(document.querySelector(".login"), "active")
                            setTimeout(function () {
                                addClass(document.querySelector(".sk-rotating-plane"), "active")
                                document.querySelector(".login").style.display = "none"
                            }, 800)
                            setTimeout(function () {
                                removeClass(document.querySelector(".login"), "active")
                                removeClass(document.querySelector(".sk-rotating-plane"), "active")
                                document.querySelector(".login").style.display = "block"
                                layui.data('twei', {
                                    key: 'rootuser'
                                    , value: {username: username}
                                });
                                window.location.href = 'adminindex.html';
                            }, 3000)
                        } else {
                            layer.msg("您的账号不允许登录！", {icon: 2, time: 800});
                        }

                    } else {
                        layer.msg("密码错误", {icon: 2, time: 800});
                    }

                } else {
                    layer.msg("用户不存在，请注册", {icon: 2, time: 800});
                }
            }
        }
    });
</script>
<script src="./js/mouse.js"></script>
</body>
</html>